<template>
  <div>
    <!--学习&#45;&#45;在线学习——详情-->
    <content-header title="详细信息"></content-header>
    <div class="header-bg xui-margin-top-lg">
      <h2 >{{detail.title}}</h2>
      <div class="xui-grid-avg-4 color-white xui-margin-top-lg" style="width:360px">
        <div>
          <p>学习人数</p>
          <p>{{detail.learnNum}}</p>
        </div>
        <div>
          <p>受众人群</p>
          <p>受众人群</p>
        </div>
        <div>
          <p>难度级别</p>
          <p>{{detail.level}}</p>
        </div>
        <div>
          <p>课程时长</p>
          <p>{{detail.courseTime}}分钟</p>
        </div>
      </div>
      <el-button v-if="detail.isSignUp == 'N'" class="signup-btn" type="primary" icon="el-icon-circle-check-outline" @click="signUp">报名学习</el-button>
      <span v-else class="signup-btn signuped">已报名</span>
    </div>
    <div class="info xui-margin-top-lg xui-fc">
      <span class="xui-fl color-primary xui-font-size-md xui-font-weight">简介：</span>
      <p class="xui-fl">
        {{detail.content}}
        <em class="color-red">温馨提示,学习完一个课程获得{{detail.medalName}}</em>
      </p>
    </div>
    <div class="zj xui-margin-top-lg" v-if="!partId">
      <p class="color-primary xui-font-size-md xui-font-weight chapter-manu-title">章节菜单：</p>
      <el-collapse accordion>
        <el-collapse-item v-for="(chapter,index) in chapters" :key="`chapter-${index}`">
          <template slot="title">
            <div class="zj-header">
              <div class="logo">
                <span>第{{index+1}}章节</span>
              </div>
              <h4>{{chapter.menuName}}</h4>
            </div>
          </template>
          <ul class="list xui-padding-vertical-children-xs xui-padding-left-children-xxl">
            <li v-for="(part,j) in chapter.list" :key="`part-${j}`">
              <p @click="showPart(chapter,part)" style="display:inline-block;cursor:pointer;font-size:14px;">
                {{index+1}}-{{j+1}} {{part.menuName}}
                <span class="color-darken-gray xui-font-size-xs">（{{part.videoTime}}）</span>
              </p>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div v-if="partId" class="part-detail xui-margin-top-xl">
      <p class="color-primary xui-font-size-md xui-font-weight chapter-manu-title">正文：</p>
      <div style="background:#f9f9f9" class="xui-padding-sm">
        <h3 class="color-primary xui-margin-bottom-xs">{{part.title}}</h3>
        <div v-html="part.content"></div>
      </div>
      <div class="jl xui-margin-top">
        <el-tabs type="border-card">
          <el-tab-pane label="讨论交流">
            <div class="dialog-comment xui-padding-sm">
              <el-form ref="commentForm" :model="form" class="form-comment" :rules="form.rules">
                <el-form-item class="input-comment" prop="comment">
                  <el-input v-model="form.comment" placeholder="说点什么..."></el-input>
                </el-form-item>
                <div class="btn-comment">
                  <el-button plain @click="submitMyComment('commentForm')">评论</el-button>
                </div>
              </el-form>

              <div class="comment-content xui-margin-top-sm">
                <h4>全部评论</h4>
                <ul class="xui-margin-bottom-sm">
                  <li v-for="(item,index) in comments" :key="index" class="xui-padding-vertical-sm">
                    <!-- <div class="avatar">
                      <img :src="item.avatar"/>
                    </div> -->
                    <div class="follow">
                      <!-- <span class="xui-fr color-gray"> <i class="iconfont icon-dianzan"></i> 5</span> -->
                      <!-- <span class="xui-fr color-gray xui-margin-right-md"> <i class="iconfont icon-BAI-pinglun"></i> 2</span> -->
                    </div>
                    <div>
                <span class="name">
                  {{item.mname || '网友评论'}}
                </span>
                      <span class="time">
                  {{item.stAct | formatTime}}
                </span>
                    </div>
                    <p>
                      {{item.content}}
                    </p>
                  </li>
                </ul>
                <div class="all-text">
                  <span>显示全部</span>
                  <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="答题">
            <div v-if="isAnswer == 'N'" >
              <div v-for="(item,index) in questions" :key="'questions-'+index">
                <p class="xui-font-size-md xui-margin-top-xl xui-margin-bottom-xs color-primary font-weight-bold" style="font-weight:700;color:#B59551">{{index+1}}. {{item.title}}</p>
                <el-radio-group v-if="item.type == 0" v-model="answers[index].answer">
                  <el-radio v-for="(answer,index) in item.questionAnswers" :label="answer.questionOption" :key="`answer${index}`">
                    <span v-if="answer.type == 0">{{answer.answerName}}</span>
                    <img v-if="answer.type == 1" :src="answer.imgUrl" alt="" width="140" height="140">
                  </el-radio>
                </el-radio-group>

                <el-checkbox-group v-if="item.type == 1" v-model="answers[index].answer">
                  <el-checkbox v-for="(answer,index) in item.questionAnswers" :label="answer.questionOption" :key="`answer${index}`">
                    <span v-if="answer.type == 0">{{answer.answerName}}</span>
                    <img v-if="answer.type == 1" :src="answer.imgUrl" alt="" width="140" height="140">
                  </el-checkbox>
                </el-checkbox-group>

                <el-radio-group v-if="item.type == 2" v-model="answers[index].answer">
                  <el-radio v-for="(answer,index) in item.questionAnswers" :label="answer.questionOption" :key="`answer${index}`">
                    <span v-if="answer.type == 0">{{answer.answerName}}</span>
                    <img v-if="answer.type == 1" :src="answer.imgUrl" alt="" width="140" height="140">
                  </el-radio>
                </el-radio-group>
              </div>
              <div v-if="questions.length" class="xui-text-center xui-margin-top">
                <el-button @click="submitAnswer" class="xui-padding-horizontal-xl" type="primary" v-loading="answerLoading">提 交</el-button>
              </div>
              <div v-else class="xui-text-center color-gray xui-padding">
                暂无问卷
              </div>
            </div>

            <div v-if="isAnswer == 'Y'">
              <div v-for="(item,index) in questions" :key="'questions-'+index">
                <p class="xui-font-size-md xui-margin-top-xl xui-margin-bottom-xs color-primary font-weight-bold" style="font-weight:700;color:#B59551">
                  {{index+1}}. {{item.title}}
                  <span class="xui-margin-left-sm color-green" v-if="item.isRight == 'Y'"><i class="el-icon-circle-check-outline color-green"></i> 回答正确</span>
                </p>
                <div v-if="item.type == 1">
                  <span class="color-gray">答案：</span>
                  <span v-for="(an,index) in item.questionAnswers" v-if="item.rightAnswer.indexOf(an.questionOption) > -1" :key="`ans-${index}`">
                    {{an.answerName}}<span v-if="!(index == item.questionAnswers.length - 1)">,</span>
                    <img v-if="an.type == 1" :src="an.imgUrl" alt="" width="140" height="140">
                  </span>
                </div>
                <div v-else>
                  <span class="color-gray">答案：</span>
                  <span v-for="(an,index) in item.questionAnswers" v-if="an.questionOption == item.rightAnswer" :key="`ans-${index}`">
                    {{an.answerName}}
                    <img v-if="an.type == 1" :src="an.imgUrl" alt="" width="140" height="140">
                  </span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import ContentHeader from "../../../components/widge/content-header";
import {
  getCourseDetail,
  signUp,
  getLessonList,
  getCommentList,
  postComment,
  getQuestionList,
  postAnswer
} from "@/api/learning-online";
import imgBox from "@/components/widge/img-box";
import { addBrowseNum } from "@/api/detail";

export default {
  components: { ContentHeader, imgBox },
  data() {
    return {
      detail: {
        title: ""
      },
      chapters: [],
      form: {
        comment: "",
        rules: {
          comment: [
            {
              required: true,
              message: "长度在3到200个字之间",
              min: 3,
              max: 200
            }
          ]
        }
      },
      isActive: false,
      curHeight: 0,
      bodyHeight: 999999999999,
      btnText: "展开全文",
      comments: [],
      part: {
        title: ""
      },
      questions: [],
      answers: [],
      answerLoading: false,
      isAnswer: "N"
    };
  },
  computed: {
    id() {
      return this.$route.params.id;
    },
    userId() {
      return this.$store.getters.userId;
    },
    userName() {
      return this.$store.getters.userName;
    },
    chapterId() {
      if (this.$route.query.chapterId) {
        return this.$route.query.chapterId;
      }
    },
    partId() {
      if (this.$route.query.partId) {
        return this.$route.query.partId;
      }
    }
  },
  methods: {
    contentToggle() {
      this.curHeight = this.$refs.bodyFont.offsetHeight;
      if (this.curHeight < this.bodyHeight) {
        this.isActive = !this.isActive;
        this.btnText = this.isActive === true ? "收起" : "展开全文";
      } else {
        this.btnText = "展开全文";
      }
      console.log(this.contentStatus);
    },
    agree() {
      let userId = this.$store.getters.userId;
      likeArt(this.detail.id, userId).then(res => {
        if (res.msg == "添加成功") {
          this.$message({
            showClose: true,
            type: "success",
            msg: "点赞成功"
          });
        }
        this.detail.isAgree = "Y";
      });
    },
    submitMyComment(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.postComment();
        } else {
          this.$message({
            showClose: true,
            message: "评论内容需要在3～200个字符之间",
            type: "error"
          });
        }
      });
    },
    getDetail() {
      getCourseDetail(this.id, this.userId).then(res => {
        this.detail = res.data;
      });
    },
    signUp() {
      signUp(this.id, this.userId, this.userName).then(res => {
        if (res.flag != 1) {
          this.$message({
            showClose: true,
            type: "error",
            message: res.msg
          });
          return false;
        }
        this.$message({
          showClose: true,
          type: "success",
          message: res.msg
        });
        this.detail.isSignUp = "Y";
      });
    },
    getLessonList() {
      getLessonList(this.id).then(res => {
        this.chapters = res.data;
        if (this.partId) {
          let chapter = this.chapters.find(chapter => {
            return chapter.id == this.chapterId;
          });
          let part = chapter.list.find(part => {
            return part.id == this.partId;
          });
          console.log("part = ", part);
          this.part = part;
          this.getCommentList();
          this.getQuestionList();
        }
      });
    },
    showPart(chapter, part) {
      this.part = part;
      this.$router.push({
        name: "study-online-detail",
        params: { id: this.id },
        query: {
          partId: part.id,
          chapterId: chapter.id
        }
      });
      this.getCommentList();
      this.getQuestionList();
      addBrowseNum(part.id, "9");
    },
    getCommentList() {
      getCommentList(this.chapterId, this.partId).then(res => {
        this.comments = res.data.recordsList;
      });
    },
    postComment() {
      let obj = {
        userId: this.userId,
        userName: this.userName,
        classId: this.partId,
        courseId: this.id,
        content: this.form.comment
      };
      postComment(obj).then(res => {
        if (res.flag == 1) {
          this.$message({
            showClose: true,
            type: "success",
            message: res.msg + "审核通过后显示。"
          });
          this.$refs.commentForm.resetFields();
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: res.msg
          });
        }
      });
    },
    getQuestionList() {
      getQuestionList(this.userId, this.partId).then(res => {
        this.questions = res.data.list;
        this.isAnswer = res.data.isAnwer;
        this.questions.forEach(item => {
          let preAnswer = {};
          preAnswer.questionId = item.id;
          preAnswer.answer = item.type == 1 ? [] : "";
          this.answers.push(preAnswer);
        });
      });
    },
    submitAnswer() {
      this.answerLoading = true;
      let ids = {
        userId: this.userId,
        courseId: this.id,
        chapterId: this.chapterId,
        partId: this.partId
      };
      postAnswer(ids, this.answers).then(res => {
        // 返回已经答过题了
        if (!res.data) {
          this.$message({
            showClose: true,
            type: "error",
            message: res.msg
          });
          this.answerLoading = false;
          return false;
        }

        // 返回正确答案，和得分。
        this.answerLoading = false;
        let rightNum = res.data.list.filter(item => {
          return item.isRight == "Y";
        }).length;
        this.$alert(
          `您共答对 ${rightNum} 道题，的得分是 ${res.data.allPoint} `,
          "答题成功",
          {
            confirmButtonText: "确定",
            type: "success",
            center: true,
            callback: action => {
              this.isAnswer = "Y";
              this.getQuestionList();
            }
          }
        );
      });
    },
    addBrowseNum() {
      if (this.$route.query.chapterId) {
        addBrowseNum(this.$route.query.chapterId, "9");
      }
    }
  },
  mounted() {
    this.getDetail();
    this.getLessonList();
    this.addBrowseNum();
  },
  watch: {},
  filters: {
    formatTime: function(value) {
      if (!value) return "";
      return value.split(" ")[0];
    }
  }
};
</script>

<style lang="less" scoped>
.header-bg {
  width: 100%;
  height: 156px;
  background: url("../../../assets/images/learning/bg.png") no-repeat;
  padding: 20px;
  position: relative;
  .signup-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  .signup-btn.signuped {
    border: 1px solid #fff;
    display: block;
    padding: 8px 20px;
    color: #fff;
    border-radius: 4px;
  }
  h2 {
    color: #fff;
    font-size: 27px;
  }
}
.info {
  span.label {
    width: 60px;
    font-size: 15px;
    font-weight: 400;
    color: #a08347;
    display: inline-block;
  }
  p {
    font-size: 14px;
    color: #434343;
  }
  em {
    display: block;
  }
}
.chapter-manu-title {
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: -1px;
  padding-bottom: 5px;
}
.zj-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  .logo {
    width: 138px;
    height: 38px;
    display: flex;
    align-items: center;
    background: url("../../../assets/images/learning/2.png") no-repeat;
    span {
      margin-left: 18px;
      color: #fff;
      font-size: 16px;
    }
  }
  h4 {
    margin-bottom: 0;
    font-size: 15px;
    color: #303030;
  }
}
.zj-content {
  border-top: 1px solid #dcdcdc;
  .list {
    background-color: #f8f8f8;
    padding-left: 83px;
    li {
      background: url("../../../assets/images/learning/dot.png") no-repeat 0
        center;
      padding-left: 20px;
    }
  }
}
.zj {
  span {
    font-size: 15px;
    font-weight: 400;
    color: #a08347;
  }
}
.bodyHeight {
  height: auto !important;
}

.bodyFont {
  height: 68px;
  overflow: hidden;
  max-height: 100%;
}

.dialog-header {
  border-bottom: 1px solid #eeeeee;
  .dialog-header-content {
    position: relative;
    .title span,
    .info span {
      display: block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      color: #b2914f;
    }
    p {
      font-size: 14px;
      line-height: 30px;
      color: #000;
      width: 80%;
    }
    .all-text {
      cursor:pointer;
      float: right;
      span {
        font-size: 14px;
        color: #bebebe;
      }
      i {
        color: #c0c0c0;
      }
    }
    .icon {
      position: absolute;
      right: 0;
      top: 0;
      span {
        font-size: 14px;
      }
    }
  }
}

.dialog-comment {
  .all-text {
    cursor:pointer;
    width: 75px;
    margin: auto;
  }
}

.form-comment {
  position: relative;
  .input-comment {
    input {
      width: calc(~"100% - 50px;");
    }
  }
  .btn-comment {
    position: absolute;
    right: 5px;
    top: 5px;

    .el-button {
      border: 1px solid #dbad23;
      color: #dbad23;
      padding: 7px 20px;
    }
    .el-button:hover {
      background: #dbad23;
      color: #fff;
    }
  }
}

.comment-content {
  h4 {
    font-size: 16px;
    margin-bottom: 0;
  }
  li {
    border-bottom: 1px solid #f5f5f5;
  }
  .avatar {
    float: left;
    width: 52px;
    height: 52px;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
      border: 1px solid #ddd;
      border-radius: 50%;
    }
  }
  .follow {
    float: right;
    margin-top: 5px;
    padding: 0;
    font-size: 13px;
  }
  .name {
    padding-top: 4px;
    font-size: 14px;
    display: inline-block;
    color: #444444;
    font-weight: bold;
    vertical-align: middle;
  }
  .time {
    display: inline-block;
    padding: 4px 0 0 3px;
    font-size: 12px;
    color: #969696;
    vertical-align: middle;
  }
  p {
    margin-top: 2px;
    font-size: 12px;
    color: #444444;
  }
  .all-text {
    cursor:pointer;
    span {
      font-size: 14px;
      color: #dbad23;
    }
    i {
      color: #bf9c51;
    }
  }
}
</style>
